<template>
    <div class="order">
		<!-- 我的订单 -->
		<!-- <div class="order-tab">
			<a class="order-tab-pink">全部</a>
			<a>待付款</a>
			<a>待发货</a>
			<a>待收货</a>
			<a>待评价</a>
		</div> -->
		<ul class="tabs clearfix order-tab">
			<li v-for="(tab,index) in tabsName" :key="index">
				<a class="tab-link" @click="tabsSwitch(index)" v-bind:class="{active:tab.isActive}">{{tab.name}}</a>
			</li>
		</ul>
		<div class="cards">
			<div class="tab-card" style="display: block;">
				<!-- 全部 -->
				<scroller :on-refresh="refresh" :on-infinite="infinite" ref="scrollerBottom" >
					<div class="common-form" v-for="(item, index) in orderList" :key="index">
					
						<div class="order-shop"  >
							<div @click="switchTo('/seckillOrderDetail/' + item.out_trade_no)">
								<p class="order-shop-tel"><i></i>{{item.merchant_name}}</p>
								<a class="order-shop-info">
									<img :src="url + item.thumbnail">
									<div>
										<p>{{item.goods_title}}</p>
										<p>{{item.quantity}}件</p>
										<p>￥{{item.total_fee}} <del>￥100.00</del></p>
									</div>
								</a>
							</div>
							<div class="order-more">
								<p>共1件商品  合计：￥45.00</p>
								<span v-if="item.order_status == 0">
									<a class="order-more-gary" @click="del(item.id)">取消订单</a>
									<a class="order-more-pink" @click="fukuan(item.quantity,item.goods_id,item.attr_id)">付款</a>
								</span>
								<span v-if=" item.order_status == 1 ">
									<a class="order-more-gary" @click="warn()" >提醒发货</a>
								</span>
								<span v-if=" item.order_status == 2 ">
									<!-- <a class="order-more-gary">删除订单</a> -->
									<router-link  :to="{path:'/SpikeDetail/'+ item.goods_id}"><a class="order-more-gary">再次购买</a></router-link>
									<a href="#" class="order-more-pink" @click="confirm(item.id)">确认收货</a>
								</span>
								<span v-if=" item.order_status == 3 ">
									<router-link  :to="{path:'/logistics1/'+ item.tracking_number}"><a class="order-more-gary">查看物流</a></router-link>
									<!-- <a href="#" class="order-more-pink">确认收货</a> -->
								</span>
							</div>
						</div>
					</div>
					<div class="clearfix"></div>
				</scroller>
			</div>
			
		</div>
	</div>
</template>

<script>
import axios from "axios";
import qs from 'qs'
import url from 'url'
    export default {
        name:'SpikeOrderList',
        data () {
            return {
				tabId: 100,
				orderList:[],
				url:'http://api.huiwanzhong365.com',
				tabsName: [
                    {
                        name: "全部",
                        isActive: true
                    }, {
                        name: "待付款",
                        isActive: false
					}, {
                        name: "待发货",
                        isActive: false
                    }, {
                        name: "已发货",
                        isActive: false
                    }, {
                        name: "已完成",
                        isActive: false
                    }
                ],
				active: false,
				page:1,
				tabIndex:0,
				refreshing: false
            }
        },
        methods:{
            switchTo(path){
                this.$router.push(path)
			},
			//删除订单
			del:function(id){
				var that = this
				layer.open({
					content: '确定要删除此订单'
					,btn: ['确定', '不要']
					,yes: function(index){
						// location.reload();
						var openid = localStorage.getItem("openid")
						var upload = {
							openid:openid,
							order_type:1,
							order_id:id
						}
						that.$http.post('/vipmember/index/deleteOrder',qs.stringify(upload)).then(res=>{
							console.log(res.data)
							//layer.msg(res.data.info);
							that.refresh()
						}).catch(err=>{
							console.log(err)
						})
						layer.close(index);
					}
				});
				// var that = this
                // var openid = localStorage.getItem("openid")
				// var upload = {
                //     openid:openid,
				// 	order_type:1,
				// 	order_id:id
                // }
                // this.$http.post('/vipmember/index/deleteOrder',qs.stringify(upload)).then(res=>{
                //     console.log(res.data)
				// 	//layer.msg(res.data.info);
				// 	that.refresh()
                // }).catch(err=>{
				// 	console.log(err)
                // })
			},
			confirm:function(id){
				var that = this
				layer.open({
					content: '买家确认收货'
					,btn: ['确定', '不要']
					,yes: function(index){
						// location.reload();
						var openid = localStorage.getItem("openid")
						var upload = {
							openid:openid,
							order_type:1,
							order_id:id
						}
						that.$http.post('/vipmember/index/confirmReceipt',qs.stringify(upload)).then(res=>{
							console.log(res.data)
							//layer.msg(res.data.info);
							that.refresh()
						}).catch(err=>{
							console.log(err)
						})
						layer.close(index);
					}
				});
				// var that = this
                // var openid = localStorage.getItem("openid")
				// var upload = {
                //     openid:openid,
				// 	order_type:1,
				// 	order_id:id
                // }
                // this.$http.post('/vipmember/index/confirmReceipt',qs.stringify(upload)).then(res=>{
                //     console.log(res.data)
				// 	//layer.msg(res.data.info);
				// 	that.refresh()
                // }).catch(err=>{
				// 	console.log(err)
                // })
			},
			//提醒发货
			warn:function(){
				layer.open({
					content: '已提醒商家发货,耐心等待哦~'
					,btn: '我知道了'
				});
			},
			//去确认订单页面
			fukuan:function(quantity,attr_id,id){
				//console.log(item)
				// this.$router.push({path:'/seckillOrder',query:{ id : this.$route.params.id,s:this.specT,quantity:this.num}});
				this.$router.push({path:'/seckillOrder',query:{ id :id,s:attr_id,quantity:quantity}});
			},
			//下拉刷新
			refresh:function(done){
				console.log('refresh')
				// console.log(id)
				this.orderList.length = 0
				this.page = 1
				this.$refs.scrollerBottom.finishInfinite(true)
				this.refreshing = true
				this.list(this.tabId,this.page, done);
			},
			//上拉加载
			infinite(done){
				console.log('infinite')
				if(this.refreshing) {
					return false
				}
				// console.log(id)
				this.list(this.tabId,this.page, done);
			},
			
			//订单列表
            list:function(pageType,page, done){
				//console.log(done)
                var that = this
                var openid = localStorage.getItem("openid")
                var upload = {
                    openid:openid,
					goods_type:1,
					order_type:pageType,
					page:page
                }
                this.$http.post('/index/merchant/goods/OrderList',qs.stringify(upload)).then(res=>{
                    console.log(res.data.data)
					// this.orderList = rs.data.data
					if(res.data.data.length < 10) {
						that.$refs.scrollerBottom.finishInfinite(true)
					}
					if(res.data.data.length == 0) {
						return false
					}
					that.orderList.push(...res.data.data);
					that.page++
					that.refreshing = false
					done()
                }).catch(err=>{
					console.log(err)
					this.refreshing = false
					done()
                })
			},
			//选项卡
			tabsSwitch: function(tabIndex) {
                console.log(tabIndex)
                var tabCardCollection = document.querySelectorAll(".tab-card"),
                    len = this.tabsName.length;
                for(var i = 0; i < len; i++) {
                    this.tabsName[i].isActive = ( i == tabIndex );
				}
				this.$refs.scrollerBottom.finishPullToRefresh();
				this.orderList.length = 0
				switch(tabIndex)
				{
					case 0:
						this.tabId = 100
					break;
					case 1:
						this.tabId = 0
					break;
					case 2:
						this.tabId = 1
					break;
					case 3:
						this.tabId = 2
					break;
					default:
						this.tabId = 3
				}
				this.$refs.scrollerBottom.triggerPullToRefresh()
				
			},
			
        },
        mounted(){
            // this.list(100);
        }
    }
</script>

<style scoped>
.order{
	width:100%;
	height:100%;
}
.cards{
	position: relative;
    height: 96%;
	top: 35px;
}
.clearfix{
    clear: both;
}
.order-more {
	text-align: right;
}
.order-tab li {
    width: 20%;
    float: left;
    text-align: center;
    padding: 13px 0;
}
.active {
    background-color: #f9f9f9 !important;
    color: #FE2746;
	font-weight: 600
}
.order-shop-tel em{
	float:right;
	font-size:12px;
	color: #FE2746;
}
.order-more-gary{
    height: 25px;
    line-height: 25px;
    border-radius: 20px;
    background-color: rgba(123, 123, 123, 0.08);
    color: #999;
    font-size: 12px;
    text-align: center;
    border: 1px solid rgba(238, 238, 238, 1);
    display: inline-block;
    padding: 0 10px;
    margin-top: 10px;
    margin-left: 10px;
}
.order-more-pink{
    height: 25px;
    line-height: 25px;
    border-radius: 20px;
    background-color: rgba(254, 39, 70, 0.08);
    color: #FC2847;
    font-size: 12px;
    text-align: center;
    border: 1px solid rgba(254, 39, 70, 0.08);
    display: inline-block;
    padding: 0 10px;
    margin-top: 10px;
    margin-left: 10px;
}
</style>